Introduction

You've recapped the principles of UX UI principles and produced an app's wireframe. In this exercise, you’ll go one step further by discovering how to use Auto layout to create an interactive component button and then reuse it in your solution for the Little Lemon food delivery app.

Auto layout can be added to frames to create dynamic components that respond to the size of their child objects, such as a button that grows with the length of its label.

Scenario

At this point you should have created a wireframe for the Little Lemon app, so you know where to place interactive elements such as buttons. Next, you’ll create these elements and make them dynamic as a means of enhancing the user experience. For example, when a user selects the “Sides” button in the menu categories, it should take on a different appearance from the other buttons to indicate that it has been selected.

Instructions

Step 1: Create a basic button using Auto layout

Open a new Figma File and select the Text tool to create a text layer. Now, label it by typing “Button” as illustrated below.

With the layer selected, use the keyboard shortcut Shift + A to add an auto layout. This places the label in an auto-layout frame.

Select the frame ( not the text layer contained within) and add a fill to it. Use the color #F4CE14 which is the Little Lemon Brand color, yellow. You now have a functioning auto layout frame that is the foundation for a button. When you change the label, for example by adding additional text, the button will dynamically resize to fit accordingly, as illustrated below.

Let’s customize the button a bit more: next, change the corner radius to 8 to round out the corners. Ensure that the button frame is selected and navigate to the Design tab to adjust the corner radius. For help with this task, refer to this page from the Figma help center.

Note: The maximum value for a corner radius is 50% of the element's height.

Step 2: Create a component

Select the frame and text and create a component. Alternatively, use the keyboard shortcut Ctrl + Alt + K .

Step 3: Variants

Variants allow you to group different visual versions of your components into one container. They are component combinations that you can group as a single component set.

Variants are added to improve design reality through natural gestures. You can add variants to a component after you have created it.

Consider two scenarios when designing a mobile device button:

• Untouched

• Clicked

Use the untouched button as the default button and take the following steps to add a variant.

• Select the component and add a variant by clicking the Plus (+) icon at the top-center.

• Name your variants in a meaningful way (such as “untouched” and “clicked”).

• Style the variant by changing the color of the fill and the text as appropriate. Note that in the example below, the "clicked" variant uses the fill color #495E57 from the Little Lemon style guide.

Step 4: Create an interactive component

Now that you’ve created variants for the component, let’s proceed to make it responsive to gestures. In this case, you’ll make the button respond to a touch or click.

• Go to the Prototype section. Select the top button, and drag the Plus (+) icon to the bottom button.

• Select On click in the Interaction details panel.

• Change the animation to Smart animate and set the time to 600ms . Now do the same with the bottom button.

For a more detailed guide to working with interactions and animations in a prototype, refer to this page in the Figma help center.

Step 5: Use the component

After creating a component, you can use it instantly as follows:

• Create a new frame.

• Drag the component from its current location in the Local components section of the Assets page, over to the new frame.

Step 6: View the interactive component

Go to Present mode by clicking the arrow icon in the top right corner and test your button.

Conclusion

In this exercise, you learned to use Auto layout to create an interactive component button. Here, the Auto layout option allowed your components to resize automatically as more properties are added to it.